<script src="lib/vue-2.4.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>


<div id="dv">
  <!--解决闪烁-->
  <p v-cloak>———————— {{mgs}} ————————</p>

  <h4 v-text="mgs">============</h4>

  <!--解决标签的输出问题-->
  <div v-html="mgs2"></div>

  <!--简写-->
  <!--<input type="button" name="" id="" value="点击" v-bind:title="mytitle" />-->
  <!--<input type="button" value="按钮2" v-on:click="show_alert" />-->
  <input type="button" value="点击1" :title="mytitle +'\n'+'123'" />
  <input type="button" value="按钮2" @click="show_alert" />

  <input type="text" name="" id="" :value="mgs" style="width:100%" />
  <p>
    <label for="id-model">v-model</label>
    <input type="text" name="" id="id-model" v-model="mgs" style="width:80%" />
    <input type="text" name="" id="id-model" v-model.number="myNumber"
      style="width:80%" />
  </p>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#dv',
    data: {
      mgs: '欢迎学习Vue.js',
      mgs2: "<h2>这是h2的标签注入</h2>",
      mytitle: '这是我的标题',
      myNumber: 0,
    },
    methods: {
      show_alert: function () {
        alert("Hello Word")
      }
    }
  })
</script>


<style type="text/css">
  [v-cloak] {
    display: none;
    color: red;
  }
</style>